<template>
<h1>文本相关指令</h1>
<!--  插值:让此处显示的文本内容和变量进行绑定-->
  <s>{{info}}</s>
<!--  让元素的文本内容和变量进行绑定-->
  <h1 v-text="info"></h1>
  <p v-text="info"></p>
<!--  v-html:让元素的html标签内容和变量进行绑定-->
  <p v-html="info"></p>
  <input type="button" value="按钮" @click="f()">
</template>

<script setup>
  import {ref} from "vue";
  // 响应式变量,当需要让页面显示的内容跟着变量改变一起改变时使用
  const info = ref('文本相关<b>标签</b>');
  // 箭头函数,作用:定义一个方法
  const f = ()=>{
    // 因为info变量是响应式变量,页面的内容和变量进行了绑定,Vue框架会不断监听响应式变量值的改变
    // 当值发生改变,会自动找到与之绑定的页面元素并进行修改
    info.value = "值改变了!";
  }
</script>

<style scoped>

</style>